<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器</title>
</head>
<body>
    <div>
        <p>全局选择器：</p>
        <span>全局选择器可以与任何元素匹配，优先级最低，一般做样式的初始化。</span>
        <p class="item">元素选择器：</p>
        <span>元素选择器，选择的是页面上所有该类型的标签，如下面的 span 标签的选择器。素有的标签都可以是选择器。</span>
        <p class="row">类选择器：</p>
        <span>类选择器是使用率最高的。<br>1、类选择器可以被多种标签使用。<br>2、类名不能以数字开头。<br>3、同一个标签可以使用多个类选择器，用空格隔开。</span>
        <p id="idname">id 选择器：</p>
        <span>1、id 选择器只能被一个标签使用，id 名不能重复。<br>2、针对于某一个标签来使用，只能使用一次。<br>3、CSS中 id选择器以 #来定义。</span>
        <p id="item_id">合并选择器：</p>
        <span>1、多种选择器一起使用一个共同的样式。<br>2、作用：提取共同的样式，减少重复代码。</span>
        <p style="color: red;">样式优先级从高到低：行内样式 1000 > id选择器 100 > 类选择器 10 > 元素选择器 1。<br>在同级别的优先级中，下面的样式会覆盖上面的样式。</p>
    </div>  
    <style>
        *{
            color: red;
            font-size: 20px;
        }
        span{
            color: black;
            font-size: 15px;
        }
        .row{
            color: blue;
            font-size: 20px;
        }
        #idname{
            color: rgb(222, 64, 190);
            font-size: 20px;
        }
        .item, #item_id{
            color: rgb(42, 212, 67);
            font-size: 20px;
        }
    </style>
</body>
</html>